<template>
	<view class="order-detail-bg">
		<!-- 物流状态 -->
		<view class="order-card delivery-card">
			<view class="delivery-row">

				<view class="delivery-info">
					<view class="delivery-title">订单状态：<text class="status">{{ orderDetail.status || '未发货' }}</text>
					</view>

					<view class="delivery-desc"
						v-if="orderDetail.order_status == 2 || orderDetail.order_status == 3 || orderDetail.order_status == 4">
						快递公司：{{ orderDetail.ship_corp  || '00.00 00:00' }}</view>
					<view class="flex-box flex-between "
						v-if="orderDetail.order_status == 2 || orderDetail.order_status == 3 || orderDetail.order_status == 4">

						<view class="delivery-desc">

							快递单号：{{ orderDetail.ship_num  || '00.00 00:00' }}</view>
						<text class="copy-btn" @click="copyId(orderDetail.ship_num)">复制</text>

					</view>


				</view>
			</view>
		</view>

		<!-- 收货信息 -->
		<view class="order-card contact-card">
			<view class="contact-row">

				<text class="contact-label">收货人</text>
				<text class="contact-value">{{ orderDetail.name || '' }}</text>
			</view>
			<view class="contact-row">
				<text class="contact-label">电话</text>
				<text class="contact-value">{{orderDetail.mobile || 1000000000}}</text>
			</view>
			<view class="contact-row">
				<text class="contact-label">地址</text>
				<text class="contact-value">{{orderDetail.address || ''}}</text>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="order-card goods-card">
			<view class="goods-row">
				<!-- <image class="goods-thumb" src="https://img1.imgtp.com/2023/10/08/9h5Ck1nJ.jpg"></image> -->
				<view class="goods-info">
					<view class="goods-title">
						{{ orderDetail.pay_body || '' }}<text>x{{ orderDetail.wares_num || 0 }}</text>
					</view>
					<view class="goods-extra">

						<text class="score">金额：{{ orderDetail.total_amount || 0 }}</text>
					</view>
				</view>
			</view>
			<!-- <view class="goods-row-attr">
				<text class="attr-label">属性：</text>
				<text class="attr-value">颜色：黑色 容量：500ml</text>
			</view> -->
		</view>

		<!-- 订单信息 -->
		<view class="order-card orderinfo-card">
			<view class="orderinfo-row">
				<text class="orderinfo-label">订单编号</text>
				<text class="orderinfo-value">{{ orderDetail.order_no || '' }}</text>
				<text class="copy-btn" @click="copyId(orderDetail.order_no)">复制</text>
			</view>
			<view class="orderinfo-row">
				<text class="orderinfo-label">下单时间</text>
				<text class="orderinfo-value">{{ orderDetail.pay_time || '00.00 00:00' }}</text>
			</view>
			<view class="orderinfo-row">
				<text class="orderinfo-label">支付方式</text>
				<text class="orderinfo-value">{{ orderDetail.pay_type|| 0 }}</text>
			</view>
		</view>

		<!-- 金额 -->
		<view class="order-card amount-card">
			<view class="amount-row">
				<text>实付金额</text>
				<text class="pay-amount">￥{{ orderDetail.pay_amount || 0 }}</text>
			</view>
			<view class="pay-title">支付明细</view>
			<view class="amount-item" v-if="orderDetail.point > 0">
				<text class="label">积分支付</text>
				<text class="value">{{ orderDetail.point }} 积分</text>
			</view>
			<view class="amount-item" v-if="orderDetail.account > 0">
				<text class="label">余额支付</text>
				<text class="value">￥{{ orderDetail.account }}</text>
			</view>
			<view class="amount-item" v-if="orderDetail.wcpay > 0">
				<text class="label">微信支付</text>
				<text class="value">￥{{ orderDetail.wcpay }}</text>
			</view>
		</view>
		<view class="order-card amount-card" v-if="orderDetail.edd_status == 3">
			<view class="amount-row">
				拒绝退款原因：<text>{{orderDetail.ebb_reason}}</text>
			</view>

		</view>
		<!-- 底部按钮 -->
		<view class="order-footer">
			<view class="footer-left">
				<text class="footer-label">合计</text>
				<text class="footer-amount">￥{{ orderDetail.pay_amount }}</text>
			</view>
			<button class="pay-btn" type="primary" v-if="orderDetail.ebb_status==0 && orderDetail.order_status!=10" @click="toRefund">{{ orderDetail.ebbStatus }}</button>
			<button class="pay-btn" type="primary" v-if="orderDetail.ebb_status==0 && orderDetail.order_status!=10" @click="checkOk">确认收货</button>
			<button class="pay-btn" type="primary" v-if="orderDetail.ebb_status==0 && orderDetail.order_status==10" >已完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {},
				loading: true,
				order_id: '',
				eddOrder_status: '申请退款'
			};
		},
		onLoad(options) {
			const orderId = options.id || "";
			this.order_id = options.id
			this.getOrderDetail(orderId);
		},
		methods: {
			toRefund(id) {
				let _this = this
				if(this.orderDetail.ebb_status == 0) {
					this.$http({
						url: '/addons/xilufitness/market_order/ebbOrder',
						method: 'get',
						data: {
							id: _this.orderDetail.id
						}
					}).then(res => {
						_this.$api.toast(res.msg)
						_this.getOrderDetail(_this.order_id)
					})
				}
			
			},
			checkOk(id) {
				let _this = this
				if(this.orderDetail.ebb_status == 0 && this.orderDetail.order_status) {
					this.$http({
						url: '/addons/xilufitness/market_order/checkOkOrder',
						method: 'get',
						data: {
							id: _this.orderDetail.id
						}
					}).then(res => {
						_this.$api.toast(res.msg)
						_this.getOrderDetail(_this.order_id)
					})
				}
			
			},
			getOrderDetail(id) {
				this.$http({
					url: '/addons/xilufitness/market_order/getDetail',
					method: 'get',
					data: {
						id
					}
				}).then(res => {
					console.log(res);
					this.orderDetail = res.data.info
					this.orderDetail.pay_type = this.orderDetail.pay_type == 1 ? '余额支付' :
						this.orderDetail.pay_type == 2 ? '微信支付' :
						this.orderDetail.pay_type == 3 ? '积分支付' :
						this.orderDetail.pay_type == 4 ? '混合支付' : ''

					this.loading = false;
					this.orderDetail.status = this.getOrderStatus(this.orderDetail.order_status)
					this.orderDetail.ebbStatus = this.getEbbStatus(this.orderDetail.ebb_status)
				})

			},
			getEbbStatus(status) {
				if (status == 0) {
					return '申请退款'
				} else if (status == 1) {
					return '申请退款中'
				} else if (status == 2) {
					return '同意退款'
				} else if (status == 3) {
					return '拒绝退款'
				}
			},
			getOrderStatus(status) {
				if (status == 0) {
					return '未支付'
				} else if (status == 1) {
					return '已支付 待发货'
				} else if (status == 2) {
					return '待揽件'
				} else if (status == 3) {
					return '已发货'
				} else if (status == 4) {
					return '已完成'
				} else if (status == 5) {
					return '已退款'
				}
			},
			copyId(title) {
				uni.setClipboardData({
					data: title,
					success: () => {
						uni.showToast({
							title: '已复制',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>


<style>
	.pay-title {
		margin: 30rpx 0 20rpx;
		font-size: 26rpx;
		color: #999;
	}

	/* 单个支付项 */
	.amount-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}

	.amount-item .label {
		color: #bdbdbd;
		font-size: 28rpx;
	}

	.amount-item .value {
		color: #FFD600;
		font-size: 28rpx;
		font-weight: 500;
	}

	/* 让卡片铺满全屏，字号大，内外边距减少，底部栏加大 */
	.order-detail-bg {
		min-height: 100vh;
		background: #E8EEFE;
		padding: 20rpx 0 140rpx 0;
	}

	/* 卡片 */
	.order-card:nth-child(1) {
		margin: 0 auto !important
	}

	.order-card {
		background: #fff;
		border-radius: 24rpx;
		margin: 20rpx auto;
		padding: 42rpx 32rpx;
		width: 90%;

		box-sizing: border-box;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
	}

	/* 物流状态 */
	.delivery-row {
		display: flex;
		align-items: center;
	}

	.delivery-info {
		margin-left: 24rpx;
	}

	.delivery-title {
		color: #333;
		font-size: 36rpx;
		margin-bottom: 6rpx;
	}

	.status {
		color: #FFD600;
		font-weight: bold;
		font-size: 36rpx;
	}

	.delivery-desc {
		color: #bdbdbd;
		font-size: 28rpx;
		margin-top: 8rpx;
	}

	.delivery-card .iconfont {
		font-size: 60rpx;
		color: #FFD600;
	}

	/* 收货人信息 */
	.contact-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.contact-label {
		color: #bdbdbd;
		font-size: 32rpx;
		margin: 0 22rpx 0 0;
	}

	.contact-value {
		color: #333;
		font-size: 32rpx;
		flex: 1;
	}

	.contact-card .iconfont {
		font-size: 40rpx;
		color: #FFD600;
		margin-right: 18rpx;
	}

	/* 商品信息 */
	.goods-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.goods-thumb {
		width: 120rpx;
		height: 120rpx;
		border-radius: 16rpx;
		background: #232323;
		margin-right: 24rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-title {
		color: #333;
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 14rpx;
	}

	.goods-extra {
		display: flex;
		align-items: center;
		gap: 30rpx;
		font-size: 30rpx;
		color: #bdbdbd;
	}

	.score {
		color: #FFD600;
	}

	.goods-row-attr {
		margin-left: 144rpx;
		/* 跟图片对齐 */
		color: #bdbdbd;
		font-size: 28rpx;
		margin-top: 6rpx;
	}

	.attr-label {
		color: #FFD600;
		margin-right: 16rpx;
	}

	.attr-value {
		color: #bdbdbd;
	}

	/* 订单信息 */
	.orderinfo-row {
		display: flex;
		align-items: center;
		margin-bottom: 14rpx;
		font-size: 28rpx;
	}

	.orderinfo-label {
		color: #bdbdbd;
		min-width: 160rpx;
		font-size: 28rpx;
	}

	.orderinfo-value {
		color: #333;
		flex: 1;
		word-break: break-all;
		font-size: 28rpx;
	}

	.copy-btn {
		color: #FFD600;
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	/* 金额 */
	.amount-row {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		color: #333;
		padding: 12rpx 0;
	}

	.amount {
		color: #FFD600;
		font-weight: bold;
		font-size: 30rpx;
	}

	.amount {
		color: #FFD600;
		font-weight: bold;
		font-size: 32rpx;
	}

	.pay-amount {
		color: #FFD600;
		font-size: 40rpx;
		font-weight: bold;
	}

	.line {
		height: 1rpx;
		background: #444;
		margin: 14rpx 0;
	}

	/* 底部 */
	.order-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120rpx;
		display: flex;
		align-items: center;
		background: #fff;
		box-shadow: 0 -4rpx 32rpx rgba(0, 0, 0, .1);
		padding: 0 36rpx;
		z-index: 99;
	}

	.footer-left {
		flex: 1;
		display: flex;
		align-items: baseline;
	}

	.footer-label {
		color: #bdbdbd;
		font-size: 32rpx;
		margin-right: 18rpx;
	}

	.footer-amount {
		color: #FFD600;
		font-size: 46rpx;
		font-weight: bold;
	}

	.pay-btn {
		width: 180rpx;
		height: 72rpx;
		background: #FFD600;
		color: #222;
		border: none;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 24rpx;
		line-height: 72rpx;
	}

	.pay-btn[disabled] {
		opacity: 0.7;
	}

	/* 字体超出省略 */
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>